<template>
  <div class="box">
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 个人中心
      <van-icon class="setting" name="setting" @click="goSet" />
    </div>
    <div class="content">
      <div class="reg">
        <div class="userimg">
          <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        </div>
        <div @click.prevent="gologin" v-text="text"></div>
      </div>
      <van-grid>
        <van-grid-item icon="gold-coin-o" text="待付款" @click="beforePay" />
        <van-grid-item icon="shop-o" text="待收货" @click="beforeGet" />
        <van-grid-item
          icon="good-job-o"
          text="待评价"
          @click="beforeEvaluate"
        />
        <van-grid-item icon="label-o" text="全部订单" @click="allOrders" />
      </van-grid>

      <van-cell title="地址管理" is-link @click="goAddress" />
      <van-cell title="我的收藏夹" is-link @click="goFavorites" />
      <van-cell title="关于我们" is-link @click="goAbout" />
      <img class="logo" src="../assets/logo.png" />
    </div>

    <FooterBarVue class="footer"></FooterBarVue>
  </div>
</template>

<script>
import FooterBarVue from "@/components/FooterBar.vue";

export default {
  name: "My",
  components: {
    FooterBarVue,
  },
  data() {
    return {
      text: "",
    };
  },
  created() {
    this.userid = sessionStorage.getItem("userid");
    this.token = sessionStorage.getItem("token");
   
    

    if (!sessionStorage.getItem("token")) {
      this.text = "请点击登录";
    } else {
      this.$service({
        method: "get",
        url: "api/user/info",
        headers:{ token: this.token},
        params: {
          userid: this.userid,
        },
      }).then((res) => {
        console.log(res.data.data.tel);
        let name = [res.data.data[0]]
        console.log('name0',name[0]);
        
        if (res.data.code == 200 && name[0].username == "") {
          this.text = "欢迎用户" +  name[0].tel;
        } else {
          this.text = "欢迎用户" +  name[0].username;
        }
      });
    }
  },
  methods: {
    gologin() {
      // this.$router.push("/Reg");
      if (!sessionStorage.getItem("token")) {
        this.$router.replace("/Login");
      } else {
        this.$router.push("/");
      }
    },
    goBack() {
      this.$router.back();
    },
    goSet() {
      this.$router.push("/Set");
    },
    goAbout() {
      this.$router.push("/About");
    },
    goAddress() {
      this.$router.push("/Address");
    },
    goFavorites() {
      this.$router.push("/Favorites");
    },
    beforePay() {
      this.$router.push("/userOrder?name=" + 1);
    },
    beforeGet() {
      this.$router.push("/userOrder?name=" + 2);
    },
    beforeEvaluate() {
      this.$router.push("/userOrder?name=" + 3);
    },
    allOrders() {
      this.$router.push("/userOrder?name=" + 4);
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #efefef;
}

.head {
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  float: left;
  margin: 1rem;
}
.setting {
  margin: 1rem;
  float: right;
}
.content {
  flex: 1;
  overflow: auto;
}
.reg {
  height: 6rem;
  line-height: 6rem;
  background-color: pink;
  display: flex;
  align-items: center;
}

.userimg {
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 2rem;
}
.userimg img {
  width: 100%;
  height: 100%;
}
/* .goods-serve{
  background-color: #fff;
  height: 5.5rem;
}
.goods-serve li{
  float: left;
  width: 25%;
  height: 100%;
  box-sizing: border-box;
  border-bottom: 0.5px solid rgb(237, 233, 233) ;
  border-right: 0.5px solid rgb(237, 233, 233) ;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .8rem;

}
.goods-serve li span{
  margin-top: .5rem;
}
.goods-serve li:last-child{
  border-right: 0;
} */
.logo {
  width: 2.5rem;
  margin: 1rem auto;
  display: block;
}
</style>